<template>
    <div class="recent">
        <div class="rec" @click="toreclist">
            <div class="box" >
                <van-cell title="最近在学" is-link />
            </div>
            <div class="bbox">
                <div class="abox">
                    <div class="dbox">
                        <img src='../../../../mock/images/swipper1.png' />
                    </div>

                    <div class="fbox">圣诞节发送到付款方式的看法给对方</div>
                </div>
                <div class="abox">
                    <div class="dbox">
                        <img src='../../../../mock/images/swipper1.png' />
                    </div>

                    <div class="fbox">圣诞节发送到付款方式的看法给对方</div>
                </div>
                <div class="abox">
                    <div class="dbox">
                        <img src='../../../../mock/images/swipper1.png' />
                    </div>

                    <div class="fbox">圣诞节发送到付款方式的看法给对方</div>
                </div>

            </div>
        </div>

    </div>


</template>

<script>
export default {
    name: '',
    data() {
        return {}
    },
    methods:{
      toreclist(){
        this.$router.push('/reclist')
      }
    }
}
</script>

<style lang="less" scoped>
@import '../../../style/common.less';

.rec {
    background-color: @cf;
    margin: 0 5%;
    margin-bottom:2% ;
   .box{

    display:flex;
    justify-content: space-between;
    align-items: center;
  
   }
   
    .bbox {
        display: flex;
        padding: 0 3%;
        .abox{
         margin-left:2vw ;
    .dbox{
     margin-bottom:2vw ;
     img{
         width: 100%;
     }
 }
 .fbox{
    font-size: 0.6rem;
    overflow: hidden;
display: -webkit-box;//将元素设为盒子伸缩模型显示
-webkit-box-orient: vertical;//伸缩方向设为垂直方向
-webkit-line-clamp: 1;
margin-bottom:2vh ;
 }

}

        

    }
   }
    :deep(.van-cell){
        font-size:1.2rem;
        font-weight: 700;
    }

</style>
